<template>
  <div>
    <div class="divHeader">
      <i class="el-icon-s-order" style="color: #ff6700"></i>
      <p>我的订单</p>
    </div>
   <div>
    <div v-if="this.list.length==0">
      <img src="../../assets/imgs/cart-empty.png" alt="">
    </div>
     <div class="divMain" v-else>
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <div>
            <p class="one">订单编号 : {{ item[0].order_id }}</p>
            <p>订单时间 : {{ item[0].order_time | formDate }}</p>
          </div>
          <div >
            <span class="span">
              <p>商品名称</p>
              <p>单价</p>
              <p>数量</p>
              <p>小计</p>
            </span>
          </div>
          <div>
            <span v-for="ite in item" :key="ite.id">
              <img
                :src="'http://101.132.181.9:3000/' + ite.product_picture"
                alt=""
                style="width: 40px; height: 40px"
              />
              <p>{{ ite.product_name }}</p>
              <p>{{ ite.product_price }}</p>
              <p>
                {{ ite.product_num }}</p>
              <p>{{ ite.product_price }}</p>
            </span>
          </div>
          <div>
            <p>共计 {{ item.length }} 件商品</p>
            <p>合计 : {{ item[0].product_price * item[0].product_num }} 元</p>
          </div>
        </li>
      </ul>
    </div>
   </div>
  </div>
</template>

<script>
import { getOrder } from "../../api/api";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.getOrders();
  },
  methods: {
    // 渲染
    async getOrders() {
      let id = JSON.parse(localStorage.getItem("user") || []);
      // let id=localStorage.getItem("code")
      console.log(id, "id");
      let userId = id.user_id;
      let res = await getOrder({ user_id: userId });
      console.log(res, "resOrder");
      if (res.code == "001") {
        this.list = res.orders;
        console.log(this.list);
      }else{
        this.$message.warning(res.msg)
      }
    },
  },
};
</script>

<style scoped>
.divHeader {
  width: 100%;
  height: 65px;
  background-color: #fff;
  padding-left: 95px;
  border-bottom: 2px solid #ff6700;
  line-height: 65px;
  font-size: 35px;
  display: flex;
  align-items: center;
}
.divMain {
  width: 100%;
}
.divMain ul {
  width: 90%;
  margin: auto;
}
ul li {
  list-style: none;
  width: 100%;
  background-color: #fff;
  margin-top: 45px;
}
li div:nth-child(1) {
  width: 100%;
  height: 65px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #ff6700;
}
 .span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 65%;
  margin-left: 23%;
}
li div:nth-child(2) {
  display: flex;
  height: 65px;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  border-bottom: 1px solid #ddd;
}
li div:nth-child(3) {
  width: 100%;
  border-bottom: 1px solid #ff6700;
}
li div:nth-child(3) span {
  width: 100%;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #ddd;
}
li div:nth-child(3) span img {
  height: 80px;
  width: 80px;
}

li div:nth-child(4) {
  display: flex;
  height: 35px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 17px;
}
.one {
  color: #ff6700;
}

</style>